New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@material/icon-button

Package Overview
Dependencies
Maintainers
17
Versions
1664
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/icon-button

The Material Components for the web icon button component

  • 3.2.0
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
473K
decreased by-35.05%
Maintainers
17
Weekly downloads
 
Created
Source

Icon Buttons

Icon buttons allow users to take actions, and make choices, with a single tap.

Design & API Documentation

  • Material Design guidelines: Toggle buttons
  • Demo

Installation

npm install @material/icon-button

Usage

HTML Structure

<button class="mdc-icon-button material-icons">favorite</button>

Note: The MDC Icon Button can be used with <button> and <a> tags.

Note: IE11 will not center the icon properly if there is a newline or space after the material icon text.

Styles

@import "@material/icon-button/mdc-icon-button";

JavaScript Instantiation

The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element. See MDC Ripple for details.

import {MDCRipple} from '@material/ripple';

const iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;

See Importing the JS component for more information on how to import JavaScript.

Variants

Icon Button Toggle

The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add both icons as child elements and place the mdc-icon-button__icon--on class on the icon that represents the on element. If the button should be initialized in the "on" state, then add the mdc-icon-button--on class to the parent button. Then instantiate an MDCIconButtonToggle on the root element.

<button id="add-to-favorites"
   class="mdc-icon-button"
   aria-label="Add to favorites"
   aria-hidden="true"
   aria-pressed="false">
   <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
   <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

import {MDCIconButtonToggle} from '@material/icon-button';
const iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));
iconToggle.unbounded = true;
Icon Button Toggle with SVG

The icon button toggle can be used with SVGs.

<button id="star-this-item"
   class="mdc-icon-button mdc-icon-button--on"
   aria-label="Unstar this item"
   aria-hidden="true"
   aria-pressed="true">
   <svg class="mdc-icon-button__icon">
     ...
   </svg>
   <svg class="mdc-icon-button__icon mdc-icon-button__icon--on">
     ...
  </svg>
</button>
Icon Button Toggle with an Image

The icon button toggle can be used with img tags.

<button id="star-this-item"
   class="mdc-icon-button mdc-icon-button--on"
   aria-label="Unstar this item"
   aria-hidden="true"
   aria-pressed="true">
   <img src="" class="mdc-icon-button__icon"/>
   <img src="" class="mdc-icon-button__icon mdc-icon-button__icon--on"/>
</button>

Icons

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Disabled

To disable an icon, add the disabled attribute directly to the <button> element. Icon buttons that use the <a> tag cannot be disabled. Disabled icon buttons cannot be interacted with and have no visual interaction effect.

<button class="mdc-icon-button material-icons" disabled>favorite</button>

Style Customization

CSS Classes

CSS ClassDescription
mdc-icon-buttonMandatory.
mdc-icon-button--onThis class is applied to the root element and is used to indicate if the icon button toggle is in the "on" state.
mdc-icon-button__iconThis class is applied to each icon element for the icon button toggle.
mdc-icon-button__icon--onThis class is applied to a icon element and is used to indicate the toggle button icon that is represents the "on" icon.

Sass Mixins

To customize an icon button's color and properties, you can use the following mixins.

MixinDescription
mdc-icon-button-size($width, $height, $padding)Sets the width, height, font-size and padding for the icon and ripple. $height is optional and defaults to $width. $padding is optional and defaults to max($width, $height)/2. font-size is set to max($width, $height).
mdc-icon-button-ink-color($color)Sets the font color and the ripple color to the provided color value.

MDCIconButtonToggle Properties and Methods

PropertyValue TypeDescription
onBooleanSets the toggle state to the provided isOn value.

Events

Event NameEvent Data StructureDescription
MDCIconButtonToggle:change{"detail": {"isOn": boolean}}Emits when the icon is toggled.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create an Icon Button Toggle for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCIconButtonToggleAdapter

Method SignatureDescription
addClass(className: string) => voidAdds a class to the root element.
removeClass(className: string) => voidRemoves a class from the root element.
hasClass(className: string) => booleanDetermines whether the root element has the given CSS class name.
setAttr(name: string, value: string) => voidSets the attribute name to value on the root element.
notifyChange(evtData: {isOn: boolean}) => voidBroadcasts a change notification, passing along the evtData to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.

Foundation: MDCIconButtonToggleFoundation

Method SignatureDescription
handleClick()Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.

Keywords

FAQs

Package last updated on 12 Sep 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

PyPI’s New Archival Feature Closes a Major Security Gap

Security News

PyPI’s New Archival Feature Closes a Major Security Gap

PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.

By Sarah Gooding  -  Jan 30, 2025
CISA Brings KEV Data to GitHub

Security News

CISA Brings KEV Data to GitHub

CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.

By Sarah Gooding  -  Jan 29, 2025
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc